<template lang="pug">
  el-container
    el-header.header
      title-bg(moduleTitle="在线论坛")
    el-container
      el-aside.nav-layout(width="258px")
        nav-menu
      el-main
        <!--main-content(modularTitle="在线论坛" :selectArray="selectArray")-->
        div.main-content-div
          p.main-content-p 在线论坛
          el-select.search-criteria(v-model="themeValue" placeholder="请选择主题")
            el-option(
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value")
          input.input-criteria(placeholder="请输入帖子标题" v-model="postTitle")
          div.btn(@click="search") 查询
          div.btn(@click="reset") 重置
        div.main-content-box
          el-row(:gutter="28")
            el-col.marTop12(:span="16")
              el-card
                div(slot="header").card-title 论坛列表
                  el-button.blueBtn(@click="post") 我要发帖
                  <!--el-button.blueBtn(@click="myReply") 我的回复-->
                  <!--el-button.blueBtn(@click="myPost") 我的发帖-->
                div.forum-articles(ref="forumBox")
                  ul.articles-box
                    li.articles-li(v-for="(item, index) in forumList" @click="toForum(item)" v-show="index<6")
                      div.headPortrait
                        img(:src="item.headportrait")
                      div.textMessage-box
                        div.textMessage-title.clearfix
                          span.btn-zd(v-if="item.messageFlag") [置顶]
                          span.btn-jp(v-if="item.messageJingFlag") [精品]
                          span.classification(v-if="item.theme") [{{item.theme}}]
                          h4 {{item.messageTitle}}
                        div.textMessage-information.clearfix
                          div.float-left
                            span {{item.userName}}
                            span.carveUp |
                            span {{item.identity}}
                            span.carveUp |
                            span {{item.hospitalName}}
                            span.carveUp |
                            span 发表于&nbsp;
                            span {{item.messageDateTime}}
                          div.float-right.page-views
                            span 查看
                            span ({{item.browsenum}})
                            span.carveUp |
                            span 回复
                            span ({{item.replynum}})
                  p.no-search(v-show="forumList.length<=0") 没有搜索到相关的内容
                  el-pagination.pagination(
                    layout="prev,pager,next,total,jumper"
                    :hide-on-single-page= "true"
                    :total="total"
                    background
                    :current-page="currentPage"
                    :page-size="pageSize"
                    prev-text="上一页"
                    next-text="下一页"
                    @current-change="handleCurrentChange"
                    @prev-click="handlePrevClick"
                    @next-click="handleNextClick"
                  )
            el-col(:span="8")
              el-card.form-card
                div(slot="header").card-title 热门帖子
                div(ref="popularBox").popular-box
                  ul.popularUl
                    li.clearfix(v-for="(item, index) in popularList" @click="toForum(item)" v-show="index<10")
                      span.discSpan
                      span.popularTitle {{item.messageTitle}}
</template>

<script>
  import TitleBg from '../../components/TitleBg'
  import NavMenu from '../../components/NavMenu'
  import MainContent from '../../components/MainContent'

  export default {
    components: {
      MainContent,
      NavMenu,
      TitleBg
    },
    name: 'ForumIndex',
    data() {
      return {
        fullHeight: document.documentElement.clientHeight, // 屏幕可视区域高度
        // selectArray: [
        //     {placeholder: '请选择主题', value: '', options: [{value: '1', label: '组织病理'}]},
        //     {placeholder: '请选择专家姓名', value: '', options: [{value: '1', label: '吉大医院'}]}
        // ],
        forumList: [], // 论坛列表
        tableHeight: null, // 表格高度——随屏幕高度实时变化
        total: null, // 分页所需患者总数
        pageSize: 6, // 分页每页页显示患者条数
        currentPage: 1, // 当前分页页数
        popularList: [], // 热门列表
        options: [
          {value: '组织病理', label: '组织病理'},
          {value: '细胞病理', label: '细胞病理'}
        ],
        themeValue: '',
        postTitle: '',
        newThemeValue: '',
        newPostTitle: ''
      }
    },
    filters: {
      // 回复内容字数过滤
      htmlFilter(value) {
        value = value.replace(/<\/?.+?>/g, '')
        if (!value) return ''
        if (value.length > 20) {
          return value.slice(0, 20) + '......'
        }
        return value
      }
    },
    mounted() {
      const that = this
      // 窗口变化重新计算高度
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
          that.$nextTick(() => {
            that.$refs.forumBox.style.height = that.fullHeight - 278 - 42 + 'px' // 帖子列表高度
            that.$refs.popularBox.style.height = that.fullHeight - 278 - 42 + 'px' // 热门帖子高度
          })
        })()
      }
      this.$nextTick(() => {
        that.$refs.forumBox.style.height = that.fullHeight - 278 - 42 + 'px' // 帖子列表高度
        that.$refs.popularBox.style.height = that.fullHeight - 278 - 42 + 'px' // 热门帖子高度
      })
      // 根据路由获取左侧导航定位
      if (this.$route.query.isChoose) {
        this.isChoose = this.$route.query.isChoose
      }
      this.getForumData(1) // 获取第一页发帖数据
      this.getPopular() // 获取热门帖子总数
    },
    watch: {
      // 监听屏幕可视区域高度变化
      fullHeight(val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的fullHeight值改变，就将其重新赋给data里的fullHeight
          this.fullHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
            that.timer = false
          }, 400)
        }
      }
    },
    methods: {

      // 前后台交互
      // 根据页数返回帖子
      getForumData(val) {
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/messages/getPostinglist', // 根据页数返回帖子
          params: {
            theme: this.themeValue,
            messageTitle: this.postTitle,
            num: val
          }
        }).then(res => {
          let _data = res.data.data
          this.total = res.data.totalCount
          console.log('------ForumData------', _data)
          this.forumList = _data
          this.forumList.forEach((item, i) => {
            if (!item.headportrait) {
              item.headportrait = require('@/assets/img/personalBtn/touristsHead.jpg')
            }
          })
        })
      },
      // // 获取发帖总数
      // getTotal() {
      //   this.$http.request({
      //     method: 'GET',
      //     url: '/camel/rest/telemedicine/messages/getsum' // 查询共有多少条帖子
      //   }).then(res => {
      //     let _data = res.data.data
      //     console.log('------total------', _data)
      //     this.total = _data[0]
      //   })
      // },
      // 获取热门发帖
      getPopular() {
        this.$http.request({
          method: 'GET',
          url: 'camel/rest/telemedicine/messages/getPopular' // 查询共有多少条帖子
        }).then(res => {
          let _data = res.data.data
          console.log('------Popular------', _data)
          this.popularList = _data
        })
      },
      // 获取我的发表数据
      getMyPost() {
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/messages/getAddMessage',
          params: {
            userName: this.$KalixCatch.get('name')
          }
        }).then(res => {
          let _data = res.data.data
          console.log('------myPost------', _data)
          this.forumList = _data
          this.forumList.forEach((item, i) => {
            if (!item.headportrait) {
              item.headportrait = require('@/assets/img/personalBtn/touristsHead.jpg')
            }
          })
        })
      },
      // 根据帖子ID跳转详情页
      toForum(item) {
        this.$router.push({path: '/forum/forumDetails', query: {forumId: item.id}})
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/messages/getbrowsenum',
          params: {
            id: item.id
          }
        }).then(res => {
        })
      },
      search() {
        this.newThemeValue = this.themeValue
        this.newPostTitle = this.postTitle
        this.$http.request({
          method: 'GET',
          url: 'camel/rest/telemedicine/messages/getSelect',
          params: {
            theme: this.newThemeValue,
            messageContent: this.newPostTitle
          }
        }).then(res => {
          let _data = res.data.data
          this.total = res.data.totalCount
          console.log('------searchData------', _data)
          this.forumList = _data
          this.forumList.forEach((item, i) => {
            if (!item.headportrait) {
              item.headportrait = require('@/assets/img/personalBtn/touristsHead.jpg')
            }
          })
        })
      },
      // 发帖按钮点击跳转发帖页面
      post() {
        this.$router.push({path: '/forum/forumPost'})
      },
      // 页面交互
      // 切换当前页
      handleCurrentChange(val) {
        console.log('当前页', val)
        this.currentPage = val
        this.getForumData(this.currentPage)
      },
      // 上一页
      handlePrevClick() {
        this.currentPage--
        this.getForumData(this.currentPage)
      },
      // 下一页
      handleNextClick() {
        this.currentPage++
        this.getForumData(this.currentPage)
      },

      // 我的发表中列表上方我的发帖
      myPost() {
        this.getMyPost()
      },
      // 我的发表中列表上方我的回复
      myReply() {
        this.forumList = []
        this.getMyReply((data) => {
          data.forEach((item, i) => {
            this.$http.request({
              method: 'GET',
              url: '/camel/rest/telemedicine/messages/getForumdetails',
              params: {
                id: item.messageId
              }
            }).then(res => {
              let _data = res.data.data[0]
              console.log('------Landlord------', _data)
              console.log('------item------', item)
              item.messageTitle = _data.messageTitle
              item.browsenum = _data.browsenum
              item.replynum = _data.replynum
              item.id = _data.id
              this.forumList.push(item)
            })
          })
        })
      },
      // 重置搜索条件
      reset() {
        this.themeValue = ''
        this.postTitle = ''
        this.getForumData(1) // 获取第一页发帖数据
      }
    }
  }
</script>

<style scoped lang="stylus">
  .header
    padding 0

  .nav-layout
    position relative
    height 100%

  .main-content-div
    margin-top 43px

  .main-content-p
    color #fff
    font-size 20px
    margin-bottom 20px

  .search-criteria .el-input .el-input__inner
    background-color rgba(0, 0, 0, 0.15)
    border none
    color #fff

  .input-criteria
    background-color rgba(0, 0, 0, 0.15)
    border none
    color #fff
    height 38px
    padding-left 18px
    width 197px
    font-size 14px

  .input-criteria::-webkit-input-placeholder
    color #fff
    opacity 1

  .main-content-div .btn
    display inline-block
    width 66px
    height 42px
    line-height 42px
    text-align: center
    background-color #0f5abc
    border 1px solid #fff
    vertical-align top
    margin-left 20px
    color #fff
    cursor pointer
    -o-user-select none /*文字禁止被选中*/
    -moz-user-select none /*火狐 firefox*/
    -webkit-user-select none /*webkit浏览器*/
    -ms-user-select none /*IE10+*/
    user-select none
    border-radius 5px
    -webkit-box-sizing border-box
    box-sizing border-box
    font-size 14px

  .clearfix
    zoom 1

  .clearfix:after
    clear both
    display block
    visibility hidden
    height 0
    line-height 0
    content ''

  .main-content-box
    margin-top 20px

  .card-title
    font-size 16px

  .articles-li
    padding 14px 10px
    border-bottom 1px dashed #dcdcdc

  .articles-li:hover
    background-color #f2f2f2

  .headPortrait
    width 60px
    height 60px
    border 2px solid #d7d7d5
    float left

  .headPortrait img
    width 56px
    height 56px
    border 2px solid #fff

  .textMessage-box
    margin-left 74px

  .textMessage-title
    height 36px
    line-height 36px
    font-size 18px

  .btn-zd, .btn-jp, .btn-tp
    float left
    margin-right 4px

  .btn-zd
    color #de1211

  .btn-jp
    color #ee6904

  .textMessage-title .classification
    float left
    margin-right 4px
    cursor pointer

  .textMessage-title h4
    float left
    cursor pointer
    width 450px
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    font-weight normal

  .textMessage-title .classification:hover,
  .textMessage-title h4:hover
    color #1572e9

  .textMessage-information
    color #999
    height 28px
    line-height 28px
    font-size 14px

  .textMessage-information .carveUp
    margin 0 5px

  .popularUl li
    font-size 14px
    color #676767
    line-height 61px
    height 61px
    white-space nowrap
    padding 0 30px

  .popularUl li:nth-child(even)
    background-color #f2f2f2

  .discSpan
    width 8px
    height 8px
    float left
    background-color #b7b8ba
    border-radius 50%
    margin 26px 20px 26px 0

  .popularTitle
    float left
    width 90%
    overflow hidden
    text-overflow ellipsis
    cursor pointer

  .popularTitle:hover
    color #1572e9

  .blueBtn
    float right
    line-height 28px
    padding 0 16px
    border-radius 17px
    margin-top -5px
    border-color #6bbbfa
    color #6bbbfa

  .blueBtn:hover
    background-color #6bbbfa
    color #fff

  .clearfix
    zoom 1

  .clearfix:after
    clear both
    display block
    visibility hidden
    height 0
    line-height 0
    content ''

  .el-main
    padding 0 20px

  .card-title
    font-size 16px

  .articles-li
    padding 14px 10px
    border-bottom 1px dashed #dcdcdc

  .articles-li:hover
    background-color #f2f2f2

  .headPortrait
    width 60px
    height 60px
    border 2px solid #d7d7d5
    float left

  .headPortrait img
    width 56px
    height 56px
    border 2px solid #fff

  .textMessage-box
    margin-left 74px

  .textMessage-title
    height 36px
    line-height 36px
    font-size 18px

  .btn-zd, .btn-jp, .btn-tp
    float left
    margin-right 4px

  .btn-zd
    color #de1211

  .btn-jp
    color #ee6904

  .textMessage-title .classification
    float left
    margin-right 4px
    cursor pointer

  .textMessage-title h4
    float left
    cursor pointer
    width 450px
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    font-weight normal

  .textMessage-title .classification:hover,
  .textMessage-title h4:hover
    color #1572e9

  .textMessage-information
    color #999
    height 28px
    line-height 28px
    font-size 14px

  .textMessage-information .carveUp
    margin 0 5px

  .popularUl li
    font-size 14px
    color #676767
    line-height 61px
    height 61px
    white-space nowrap
    padding 0 30px

  .popularUl li:nth-child(even)
    background-color #f2f2f2

  .discSpan
    width 8px
    height 8px
    float left
    background-color #b7b8ba
    border-radius 50%
    margin 26px 20px 26px 0

  .popularTitle
    float left
    width 90%
    overflow hidden
    text-overflow ellipsis
    cursor pointer

  .popularTitle:hover
    color #1572e9

  .blueBtn
    float right
    line-height 28px
    padding 0 16px
    border-radius 17px
    margin 0 10px
    margin-top -5px
    border-color #6bbbfa
    color #6bbbfa

  .blueBtn:hover
    background-color #6bbbfa
    color #fff

  .forum-articles
    position relative
    overflow auto

  .pagination
    position absolute
    left 50%
    bottom 0
    transform translate(-50%, 0)

  .no-search
    text-align center
    font-size 20px
    margin-top 20px

  .popular-box
    overflow auto
</style>
